<template>
  <view class="order-list">
    <view class="order-item" v-for="(item, index) in feeList" :key="index">
      <!-- 顶部信息 -->
      <view class="order-item-header">
        <view class="order-item-header-left">
          <view class="order-amount">押金扣款抵扣租车金额：{{ item.checkedAmount || 0 }} 元</view>
          <view class="order-code">{{ item.orderCode }}</view>
        </view>
        <!-- 多选框 -->
        <view class="order-item-header-right">
          <customCheck size="36" v-model="item.check" v-model:indeterminate="item.indeterminate" @change="onOrderItemChange(item)" />
        </view>
      </view>
      <!-- 费用信息 -->
      <view class="order-item-content">
        <ve-card
          type="blue"
          v-for="(fee, feeIndex) in item.feeDetailList"
          :key="feeIndex"
          :style="{ marginBottom: feeIndex == item.feeDetailList.length - 1 ? 0 : '24rpx', background: '#f7f8fA' }"
        >
          <template #title>
            <view class="title-wrapper">
              <text>{{ fee.itemName }}</text>
              <!-- 标签 -->
              <view class="label-list">
                <!-- 费用状态 -->
                <ve-tag color="red" :title="fee.feeStatusName" />
                <!-- 费用类型 -->
                <ve-tag color="blue" :title="fee.feeTypeName" />
                <!-- 收支类型 -->
                <ve-tag color="orange" :title="fee.costTypeName" />
              </view>
            </view>
          </template>
          <template #extra>
            <customCheck size="36" v-model="fee.check" render-type="deep-round" @change="onFeeItemChange(item)" />
          </template>
          <!-- 内容 -->
          <ve-cell-price label="总额" :value="fee.amount" />
          <ve-cell-price label="实结" :value="fee.payAmount" />
          <ve-cell-price label="未结" :value="fee.waitPayAmount" class="custom-cell" />
          <ve-cell label="生成节点">{{ fee.createNodeName }}</ve-cell>
          <ve-cell label="费用备注">
            <remark :text="fee.remark" />
          </ve-cell>
        </ve-card>
      </view>
    </view>
  </view>
</template>
<script setup>
  import { decimalAddition } from '@/utils/index'
  import customCheck from './custom-check.vue'
  import remark from '../../detail/components/free-deposit-record/remark.vue'

  const emits = defineEmits(['change'])

  const props = defineProps({
    feeList: Array,
  })

  // 点击订单
  const onOrderItemChange = (order) => {
    const check = order.check
    order.feeDetailList.forEach((fee) => {
      fee.check = check
      fee.indeterminate = false
    })

    // 计算选中的费项金额
    calcCheckedAmount(order)

    emits('change')
  }

  // 点击费项
  const onFeeItemChange = (order) => {
    // 处理当前 item 的 check 状态
    const feeDetailList = order.feeDetailList
    // 获取选中的费项
    const checkedFeeList = feeDetailList.filter((item) => item.check)
    // 重置选中状态
    order.check = false
    order.indeterminate = false
    // 全部选中
    if (checkedFeeList.length > 0) {
      if (checkedFeeList.length == feeDetailList.length) {
        order.check = true
      } else {
        order.indeterminate = true
      }
    }

    // 计算选中的费项金额
    calcCheckedAmount(order)

    emits('change')
  }

  // 计算选中的费项金额
  const calcCheckedAmount = (order) => {
    // 处理当前 item 的 check 状态
    const feeDetailList = order.feeDetailList
    // 获取未选中的费项
    const checkedFeeList = feeDetailList.filter((item) => item.check)
    // 计算选中的费项金额
    let amount = 0
    checkedFeeList.forEach((checkFee) => {
      amount = decimalAddition(amount, checkFee.realAmount)
    })

    order.checkedAmount = amount
  }

  defineExpose({})
</script>
<style lang="less" scoped>
  .order-item {
    border-radius: 6rpx;
    overflow: hidden;
    .order-item-header {
      width: 100%;
      background: #3072f6;
      padding: 24rpx 32rpx 24rpx 24rpx;
      display: flex;
      .order-item-header-left {
        flex: 1;
        .order-amount {
          font-weight: 600;
          font-size: 32rpx;
          color: #ffffff;
          line-height: 44rpx;
        }
        .order-code {
          font-size: 28rpx;
          color: #ffffff;
          line-height: 44rpx;
          margin-top: 8rpx;
        }
      }
      .order-item-header-right {
        flex-shrink: 0;
        margin-left: 30rpx;
      }
    }
    .order-item-content {
      padding: 24rpx;
      background-color: #ffffff;
      .title-wrapper {
        display: flex;
        align-items: center;
        text {
          margin-right: 16rpx;
        }
        .label-list {
          /deep/ .title {
            height: 40rpx;
            font-size: 24rpx;
            line-height: 40rpx;
          }
        }
        .fillet-label + .fillet-label {
          margin-left: 32rpx;
        }
      }
    }
  }
  .order-item + .order-item {
    margin-top: 24rpx;
  }
  .custom-cell {
    /deep/ .ve-cell-price {
      color: #f53f3f;
    }
  }
</style>
